<template>
  <!-- 用户编辑 -->
  <div
    style="
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    "
  >
    <el-form ref="formRef" :rules="rules" :model="form" label-width="120px">
      <div class="chunk">
        <el-divider class="divider" content-position="left">
          <span style="color: #409eff; font-size: 16px">账号信息</span>
        </el-divider>
        <el-row :gutter="gutter" style="margin: 0 40px">
          <el-col :span="8">
            <el-form-item label="员工编号：" prop="userId">
              <el-input
                disabled
                v-model="form.userId"
                placeholder="员工号是在企业的唯一标识，自动生成"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex">
            <el-tooltip
              style="padding-top: 8px; padding-left: 15px; position: absolute"
              content="员工账号用于进行系统登录账号"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            <div style="width: 100%">
              <el-form-item label="员工账号：" prop="userName">
                <el-input
                  disabled
                  v-model="form.userName"
                  placeholder="请输入员工账号，不许重复"
                >
                  <el-select
                    style="width: 75px"
                    v-model="form.sex"
                    slot="append"
                    placeholder=""
                  >
                    <el-option
                      v-for="item in dict.type.sys_user_sex"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="chunk">
        <el-divider class="divider" content-position="left">
          <span style="color: #409eff; font-size: 16px">个人信息</span>
        </el-divider>
        <el-row :gutter="gutter" style="margin: 0 40px">
          <el-col :span="8">
            <el-form-item label="员工姓名：" prop="nickName">
              <el-input
                v-model="form.nickName"
                placeholder="请输入员工姓名，允许重复"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phonenumber">
              <el-input
                v-model="form.phonenumber"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电子邮箱：" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter" style="margin: 0 40px">
          <el-col :span="8">
            <el-form-item label="微信账号：" prop="weChatId">
              <el-input
                v-model="form.weChatId"
                placeholder="请输入微信账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="QQ账号：" prop="qqId">
              <el-input
                v-model="form.qqId"
                placeholder="请输入QQ账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况：" prop="maritalStatus">
              <el-select
                v-model="form.maritalStatus"
                placeholder="请选择婚姻状况"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.sys_marital_status"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter" style="margin: 0 40px">
          <el-col :span="8">
            <el-form-item label="生育状况：" prop="fertilityStatus">
              <el-select
                v-model="form.fertilityStatus"
                placeholder="请选择生育状况"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.sys_fertility_status"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="">
            <el-form-item label="户口类型：" prop="householdType">
              <el-select
                v-model="form.householdType"
                placeholder="请选择户口类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.sys_household_type"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址：" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入联系地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div class="saveBtn">
      <el-button type="primary" @click="handleSave">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { v_name, v_email, v_phone } from "@/utils/validate.js";
import { updateUserInfo } from "@/api/system/user.js";

export default {
  name: "EditUserInfo",
  dicts: [
    "sys_user_sex",
    "sys_fertility_status",
    "sys_marital_status",
    "sys_household_type",
  ],
  data() {
    return {
      // leyout间隙
      gutter: 20,
      form: {},
      rules: {
        // 员工姓名
        nickName: [{ required: true, validator: v_name, trigger: "blur" }],
        // 电子邮件
        email: [{ required: true, validator: v_email, trigger: "blur" }],
        // 手机号
        phonenumber: [{ required: true, validator: v_phone, trigger: "blur" }],
      },
      // 表单校验结果
      validate: false,
    };
  },
  methods: {
    init(userInfo) {
      this.form = JSON.parse(JSON.stringify(userInfo));
    },
    // 校验表单
    validateForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.validate = true;
          return true;
        } else {
          this.validate = false;
          return false;
        }
      });
    },
    // 添加数据
    handleSave() {
      // 校验表单
      this.validateForm();

      if (!this.validate) {
        return;
      }

      // 发起请求修改
      updateUserInfo(this.form).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
        } else {
          this.$modal.msgError("系统错误，请稍后尝试！");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chunk {
  margin-top: 70px;
  margin-bottom: 50px;
  padding: 0 30px;
}

.divider {
  margin-bottom: 50px;
  margin-top: 50px;
}

.saveBtn {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
</style>